<template>
  <div class="dy-header">
    <n-page-header @back="onback">
      <template #avatar>
        <!-- 面包屑 -->
        <n-breadcrumb>
          <template v-for="routeItem in breadcrumbList" :key="routeItem.name">
            <n-breadcrumb-item>
              <n-dropdown
                v-if="routeItem.children && routeItem.children.length"
                :options="routeItem.children"
                @select="dropdownSelect"
              >
                <span class="link-text">
                  {{ routeItem.meta.title }}
                </span>
              </n-dropdown>
              <span class="link-text" v-else>
                {{ routeItem.meta.title }}
              </span>
            </n-breadcrumb-item>
          </template>
        </n-breadcrumb>
      </template>
    </n-page-header>
    <n-divider style="margin-top: 0; margin-bottom: 5px" />
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, toRefs } from 'vue';
import SlashAppContext from '@/context/SlashAppContext';
import { RouteRecordRaw, useRouter } from 'vue-router';
import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
import md5 from 'js-md5';
import { deepMerge } from '@/utils';

export default defineComponent({
  name: 'SlashPanelHeader',
  props: {
    title: {
      type: [String],
      default: '',
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const router = useRouter();
    function onback() {
      SlashAppContext.back();
    }
    const findMenu: any = (menus: RouteRecordRaw[], path: string) => {
      let result: RouteRecordRaw[] = [];
      for (let i = 0; i < menus.length; i++) {
        const menu: RouteRecordRaw = menus[i];
        menu['label'] = menu.meta.title||props.title ;
        menu['key'] = menu.id;
        const redirect = menu.redirect || '';
        if (redirect != '' && path.endsWith(`${redirect}`)) {
          result.push(menu);
          break;
        }
        if (menu.children != null && menu.children.length > 0) {
          const temp: RouteRecordRaw[] = findMenu(menu.children, path);
          if (temp.length > 0) {
            result = [menu, ...temp];
            break;
          }
        }
      }
      return result;
    };
    const curMenuRef = ref<RouteRecordRaw[]>([]);
    const generator: any = (routerMap) => {
      console.log('生成面包', routerMap);
      const asyncRouteStore = useAsyncRouteStore();
      const menus = asyncRouteStore.getMenus;
      let curMenu: RouteRecordRaw[] = findMenu(menus, routerMap);
      console.log('面包结果:{}', curMenu, menus);
      if (curMenu && curMenu.length > 0) {
        curMenuRef.value = curMenu;
      } else {
        const title = SlashAppContext.getRequest().slashInnerTitle;
        curMenuRef.value.push({
          label: title,
          meta: {
            title: title,
          },
          key: md5(routerMap),
        } as any);
      }
    };
    const breadcrumbList = computed(() => {
      // return generator(route.path);
      return curMenuRef.value;
    });

    // watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
    //   generator(newValue);
    // }, { immediate: true });
    onMounted(() => {
      if (router) {
        generator(router.currentRoute.value.path);
      }
    });
    const dropdownSelect = (key, item) => {
      router.push({
        path: item.redirect,
        query: {
          slashInnerTitle: item.meta.title,
          slashInnerOpen: 1,
        },
      });
    };
    const { title } = toRefs(props);
    console.log('面包参数', title.value);
    const titleList = title.value.split('/');
    return { titleList, onback, dropdownSelect, breadcrumbList };
  },
});
</script>
<style>
.dy-header {
  margin-top: 5px;
}
</style>
